<template>
    <!-- 员工操作页面 -->
    <div class="dashboard-container" id="member-app">
        <div class="container">
            <div class="tableBar">
                <el-input @keyup.enter.native="handleQuery" clearable placeholder="请输入员工姓名" style="width: 250px"
                    v-model="input">
                    <i @click="handleQuery" class="el-input__icon el-icon-search" slot="prefix"
                        style="cursor: pointer"></i>
                </el-input>
                <el-button @click="addMemberHandle('add')" type="primary">
                    + 添加员工
                </el-button>
            </div>
            <el-table :data="tableData" class="tableBox" stripe>
                <el-table-column label="员工姓名" prop="name"></el-table-column>
                <el-table-column label="账号" prop="username"></el-table-column>
                <el-table-column label="手机号" prop="phone"></el-table-column>
                <el-table-column label="账号状态">
                    <template slot-scope="scope">
                        {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button :class="{ notAdmin: user !== 'admin' }" @click="addMemberHandle(scope.row.id)"
                            class="blueBug" size="small" type="text">
                            编辑
                        </el-button>
                        <el-button @click="statusHandle(scope.row)" class="delBut non" size="small" type="text"
                            v-if="user === 'admin'">
                            {{ scope.row.status == '1' ? '禁用' : '启用' }}
                        </el-button>
                        <el-button @click="deleteMemberHandle(scope.row.id)" class="delBut non" size="small" type="text"
                            v-if="user === 'admin'">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="page" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :total="counts" @current-change="handleCurrentChange" @size-change="handleSizeChange" class="pageList"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
</template>

<script>
import { getMemberList, enableOrDisableEmployee, deleteMember } from '@/api/member'


export default {
    name: 'member',
    data() {
        return {
            input: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            tableData: [],
            id: '',
            status: '',
        }
    },
    computed: {},
    created() {
        this.init()
        if (localStorage.getItem('userInfo') != null) {
            //获取当前登录员工的账号,并赋值给模型数据user
            this.user = JSON.parse(localStorage.getItem('userInfo')).username
        } else {
            console.log("用户未登录")
        }
    },
    mounted() {
    },
    methods: {
        async init() {
            const params = {
                page: this.page,         //当前页码
                pageSize: this.pageSize,    //每页显示条数
                name: this.input ? this.input : undefined   //搜索关键字
            }
            await getMemberList(params).then(res => {       //获取员工列表
                if (String(res.code) === '1') {     //判断获取员工列表是否成功
                    this.tableData = res.data.records || []  //将获取到的员工列表赋值给模型数据tableData
                    this.counts = res.data.total    //将获取到的员工总数赋值给模型数据counts
                }
            }).catch(err => {
                console.log(err.message.indexOf('undefined'));
                if (err.message.indexOf('undefined') > -1) {
                    this.$message.error('请先登录: ' + err);
                } else {
                    this.$message.error('未知错误: ' + err);
                }
            })
        },
        handleQuery() {
            this.page = 1;
            this.init();
        },
        // 添加
        addMemberHandle(st) {
            if (st === 'add') {
                const params = {
                    id: '2',
                    url: 'home/memberadd',
                    name: '添加员工',
                    goBackFlag: true
                }
                this.$store.dispatch('menuHandle', params)
            } else {
                console.log("您不是管理员登录,当前只允许修改您自己的账户");
                const userid = JSON.parse(localStorage.getItem('userInfo')).id;
                if (st == userid || this.user == "admin") {
                    const params = {
                        id: '2',
                        url: 'home/memberadd?id=' + st,
                        name: '修改员工',
                        goBackFlag: true
                    }
                    this.$store.dispatch('menuHandle', params)
                } else {
                    this.$message.error('您没有此权限')
                }
            }
        },
        // 删除
        deleteMemberHandle(id) {
            this.$confirm('确定要删除该员工吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const params = {
                    id: id
                }
                deleteMember(params).then(res => {
                    if (String(res.code) === '1') {
                        this.$message.success('删除成功')
                        this.handleQuery()
                    } else {
                        this.$message.error('删除失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => {
                this.$message.info('已取消删除')
            }
            )
        },
        //状态修改
        statusHandle(row) {
            this.id = row.id
            this.status = row.status
            this.$confirm('确认调整该账号的状态?', '提示', {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
            }).then(() => {
                enableOrDisableEmployee({ 'id': this.id, 'status': !this.status ? 1 : 0 }).then(res => {
                    console.log('enableOrDisableEmployee', res)
                    if (String(res.code) === '1') {
                        this.$message.success('账号状态更改成功！')
                        this.handleQuery()
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            }).catch(() => { });
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.page = val
            this.init()
        }
    }
}
</script>

<style lang="css" scoped>
/* @import '@/assets/fonts/element-icons.woff'; */
@import '@/assets/css/common.css';
@import '@/assets/css/page.css';

#member-app .notAdmin::after {
    border: 0 !important;

}
</style>